<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common :: header"></head>
    <!--switchery Stylesheet-->
    <link rel="stylesheet" th:href="@{/plugins/switchery/switchery.min.css}">
</head>

<body>
<!--Page content-->
<div id="page-content" class=" animated fadeIn">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">用户列表</h3>
                </div>
                <div class="panel-body">
                    <div class="pad-btm form-inline">
                        <div class="row">
                            <div class="col-sm-12 table-toolbar-left" id="toolbar">
                                <span th:each="button: ${buttonList}">
                                    <button th:if="${#strings.containsIgnoreCase(button.perCode,'save')}" class="btn btn-primary freedom-add" th:shiro:hasPermission="${button.perCode}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                    <button th:if="${#strings.containsIgnoreCase(button.perCode,'update')}" class="btn btn-warning freedom-edit" disabled th:shiro:hasPermission="${button.perCode}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                    <button th:if="${#strings.containsIgnoreCase(button.perCode,'remove')}" class="btn btn-danger freedom-delete" disabled th:shiro:hasPermission="${button.perCode}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                    <button th:if="${#strings.containsIgnoreCase(button.perCode,'query')}" class="btn btn-success freedom-query" data-target="#query-modal" data-toggle="modal" th:shiro:hasPermission="${button.perCode}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="listTable"
                               data-toolbar="#toolbar"
                               data-detail-view="true"
                               data-minimum-count-columns="2"
                               data-classes="table table-hover table-borderless"
                               data-sort-order="desc">
                            <thead>
                                <tr>
                                    <th data-align="center" data-checkbox="true"></th>
                                    <th data-align="center" data-formatter="numFormatter">序号</th>
                                    <th data-align="center" data-field="avatar" data-formatter="avatarFormatter">头像</th>
                                    <th data-align="center" data-field="username">用户名</th>
                                    <th data-align="center" data-field="nickname">昵称</th>
                                    <th data-align="center" data-field="gender" data-formatter="genderFormatter">性别</th>
                                    <th data-align="center" data-field="email">邮箱地址</th>
                                    <th data-align="center" data-field="state" data-formatter="statusFormatter">状态</th>
                                    <th data-align="center" data-field="createTime">创建时间</th>
                                    <th data-align="center" data-field="updateTime">修改时间</th>
                                    <th data-align="center" data-formatter="actionFormatter">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 搜索框 -->
    <div class="modal fade" id="query-modal" role="dialog" tabindex="-1" aria-labelledby="default-modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-horizontal" id="queryForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                        <h4 class="modal-title">查询</h4>
                    </div>
                    <div class="modal-body">
                        <!--查询 input-->
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="username">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="用户名" id="username" name="username" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="nickname">昵称</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="昵称" id="nickname" name="nickname" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="email">Email</label>
                                <div class="col-sm-9">
                                    <input type="email" placeholder="邮箱地址" id="email" name="email" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning" type="button">重置</button>
                        <button class="btn btn-primary" type="submit">查询</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<!--End page content-->
<div th:include="common :: script"></div>
<script type="text/javascript" th:src="@{/plugins/switchery/switchery.min.js}"></script>
<script type="text/javascript" th:inline="javascript" >

    function numFormatter(value, row, index) {
        return index + 1;
    }

    function avatarFormatter(value, row) {
        return "<img src='"+value+"' width='32' height='32'/>";
    }
    
    function genderFormatter(value, row) {
        return value == 1 ? "男" : "女";
    }

    function statusFormatter(value, row) {
        var labelColor;
        var info;
        if (value == "0") {
            info = "锁定";
            labelColor = "warning";
        } else if(value == "1"){
            info = "正常";
            labelColor = "success";
        }else if(value == "2"){
            info = "禁用";
            labelColor = "danger";
        }
        return '<div class="label label-table label-'+ labelColor+'"> ' + info + '</div>';
    }

    function actionFormatter(value, row) {
        var btnArr = [];
        var permissions = [[${permissions}]];
        if (permissions.indexOf("core:user:query") > -1) {
            btnArr.push('<a class="btn btn-default btn-xs" href="javascript:;;" onclick="$.freedom.action.showDetailUI(\'' + row.id + '\')"><i class="fa fa-user-o"></i> 详情</a> ');
        }

        if (permissions.indexOf("core:user:assign:role") > -1) {
            btnArr.push('<a class="btn btn-info btn-xs" href="javascript:;;" onclick="assignRoleUI(\'' + row.id + '\')"><i class="fa fa-user-o"></i> 设置角色</a> ');
        }

        if (permissions.indexOf("core:user:remove") > -1) {
            btnArr.push('<a class="btn btn-danger btn-xs" href="javascript:;;" onclick="$.freedom.action.delete(\'' + row.id + '\')"><i class="fa fa-remove"></i> 删除</a>');
        }

        return btnArr.join('');
    }

    function assignRoleUI(userId) {
        var url = [[${assignRoleUrl}]];
        $.freedom.modal.window("分配角色",  url.replace(/{userId}/, userId), 800, 400);
    }

    $(function() {
        /**
         *  init 方法中可传入的参数:
         *    id: "listTable",              // table id
         *    baseUrl: "",                  // 基础路径
         *    addUIUrl: "saveUI.html",       // 新增页面地址
         *    editUIUrl: "updateUI.html",     // 编辑页面地址
         *    deleteUrl: "remove.json",     // 删除地址
         *    listUrl: "list.json",         // 列表地址
         *    detailUIUrl: "detailUI.html", // 详情地址
         *    queryFormId: "queryForm",     // 搜索框表单 id
         *    columns：[],                  // bootstrap-table cell 参数，页面默认使用内嵌方式设置数据
         *    pagination：true              // 是否分页
         */
        var prefix = [[${prefix}]];
        $.freedom.ui.table.init({
            baseUrl: prefix
        });

    });

</script>
</body>
</html>
